<template>
  <li>
    <input 
        type="checkbox"
        :checked="item.completed"
        @click="changeCheckbox(item.id)"
    />
    <span
        :style="{ 'text-decoration' : item.completed ? 'line-through' : ''}"
    >{{ item.content }}</span>
    <button @click="removeTodo(item.id)">remove</button>
  </li>
</template>

<script>
export default {
    name: 'Todo',
    props: {
        item : Object
    },
    methods: {
        // changeCheckbox(id) {
        //     this.$emit('changeCheckbox', id);
        // },
        // removeTodo(id) {
        //     this.$emit('removeTodo', id);
        // }
        changeCheckbox(id) {
            this.$emit('dispatch','CHANGE_CHECKBOX',id);
        },
        removeTodo(id) {
            this.$emit('dispatch','REMOVE_TODO',id);
        }
    }
}
</script>

<style scoped>
li {
    margin-bottom: 5px;
}
</style>
